<!--
 * @Description: 招聘-简历
 * @Author: rcc
 * @Date: 2024-08-08 11:40:04
 * @FilePath: /rc-recruitment/pages/tab-page/hiring-resume/hiring-resume.vue
-->

<template>
	<view class="page">
		<up-navbar title="收到的简历投递" placeholder :titleStyle="titleStyle" bgColor="#1269FF">
			<template #left>
				<view class="flex"></view>
			</template>
		</up-navbar>

		<up-sticky bgColor="#fff">
			<up-tabs :list="tabs" :scrollable="false" :current="active" :activeStyle="activeStyle"
				:inactiveStyle="inactiveStyle" lineColor="#3F77FB" @change="handleChange"></up-tabs>
		</up-sticky>

		<view class="m-t40 p-h24">
			<view class="card flex-d-lc" v-for="(item, index) in list" :key="index" @click="goto"
				:data-url="`/pages/office/resume/resume?id=${item.id}&user_id=${item.user_id}`">
				<view class="relative flex-r w p-v10">
					<view class="tag">新</view>
					<text class="text-400-326">{{ getDateDiff(item.resume_time) }}</text>
				</view>

				<view class="flex w p-b20 border-b4">
					<image class="cover" :src="item.avatar" mode="aspectFill"></image>

					<view class="flex-1 flex-d-lc m-l20">
						<text class="text-700-130">{{ item.nickname }} | {{ item.gender == 1 ? '男' : '女' }} | {{ item.age }}岁</text>
						<text class="m-t10 text-400-326">{{ item.school_name }} | {{ item.education }} | {{ item.speciality }} </text>
					</view>
				</view>

				<view class="flex w h-88">
					<text class="text-400-326">投递了</text>
					<text class="flex-1 m-l10 text-700-526">{{ item.title }}</text>
					<text class="text-400-326">{{ item.area }} | {{ item.education }} | {{ item.work }}年工作经验 | {{ getNature
						(item.xingzhi) }}</text>
				</view>
			</view>
			<up-empty text="暂无数据" mode="list" v-if="!list.length"></up-empty>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { getDateDiff } from '@/utils/utils'
import { onShow } from '@dcloudio/uni-app'
import { useNavigator } from '@/hooks/use-navigator'
const { goto } = useNavigator()
const list: any = ref([])
const active: number = ref(0)
//切换
function handleChange(e) {
	active.value = e.index
	getList()
}
//获取列表
async function getList() {
	const res = await uni.$u.get('/resume/lst', { type: active.value })
	list.value = res.data
}
const getNature = (type: number) => {
	const obj = {
		1: '全职',
		2: '兼职',
		3: '实习',
	}

	return obj[type as keyof typeof obj] ?? ''
}

const titleStyle = {
	'color': '#fff',
	'font-size': '34rpx',
	'font-weight': 'bold',
}

const activeStyle = {
	color: '#3F77FB',
	'font-size': '28rpx',
	'font-weight': 'bold',
}

const inactiveStyle = {
	color: '#666666',
	'font-size': '28rpx',
	'font-weight': 'bold',
}

const tabs = reactive([
	{ name: '未处理' },
	{ name: '面试' },
	{ name: '不合适' },
])
onShow(() => {
	getList()
})
</script>

<style lang="scss" scoped>
.page {
	width: 100%;
	min-height: 100%;
	padding-bottom: 20rpx;
	// #ifdef H5
	padding-bottom: 100rpx;
	// #endif
	background-color: $page-color-4;
}

.card {
	margin-bottom: 20rpx;
	padding: 0 20rpx;
	border-radius: 10rpx;
	background-color: $bg-color-1;

	.tag {
		position: absolute;
		top: 0;
		left: -20rpx;
		width: 44rpx;
		height: 32rpx;
		color: #E51C23;
		font-size: 24rpx;
		text-align: center;
		line-height: 32rpx;
		background-color: #FFD9DA;
		border-radius: 10rpx 0rpx 10rpx 0rpx;
	}

	.cover {
		width: 102rpx;
		height: 102rpx;
		border-radius: 10rpx;
		border: 1rpx solid $border-color-4;
	}
}
</style>